<script>
import { getUserList } from '@/api/user'

export default {
  data () {
    return {
      userList: [],
      currentPage: 1
    }
  },
  mounted () {
    getUserList().then(res => {
      // console.log(res);
      this.userList = res.data
    })
  },
  computed: {
    // 根据当前页码获取到当前页的数据
    computedTableData () {
      return this.userList.slice((this.currentPage - 1) * 10, (this.currentPage - 1) * 10 + 10)
    }
  }
}
</script>
<template>
  <div>
    用户列表
    <el-table :data="computedTableData">
      <el-table-column prop="tel" label="手机号"></el-table-column>
      <el-table-column prop="userid" label="用户 id"></el-table-column>

    </el-table>
    <!-- -------------- 做分页显示用的 ----------------- -->
    <el-pagination background layout="prev, pager, next" v-model:current-page="currentPage" :total="userList.length" />

  </div>
</template>
